<template>
  <div class="page-operation">
    <el-button type="primary" @click="handleInsert">Insert Category</el-button>
  </div>
  <div class="page-filter">
    <el-form inline :disabled="isLoadingCategoryList" @submit.prevent="handleSearch">
      <el-form-item label="Status">
        <el-select v-model="categoryListParams.status">
          <el-option value label="All"></el-option>
          <el-option value="1" label="Active"></el-option>
          <el-option value="0" label="Inactive"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Name">
        <el-input v-model="categoryListParams.title"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">Search</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="page-container" v-loading="isLoadingCategoryList">
    <el-table border :data="categoryList">
      <el-table-column label="ID" prop="id" width="100"></el-table-column>
      <el-table-column label="Name" prop="title"></el-table-column>
      <el-table-column label="Summary" prop="intr"></el-table-column>
      <el-table-column label="Image" width="120">
        <template #default="{ row }">
          <el-image :src="row.image" style="width: 30px; height: 30px"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="Status" width="120">
        <template #default="{ row }">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="row.status"
            @change="handleSetProductStatus(row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="Action" fixed="right" width="220">
        <template #default="{ row }">
          <el-link type="primary" @click="handleEdit(row)">Edit</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link type="primary" @click="handleViewArticle(row)">View Article</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link
            type="danger"
            @click="handleDeleteProduct(row)"
          >{{ row.is_del ? 'Restore' : 'Delete' }}</el-link>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-model:index="categoryListParams.page"
      v-model:size="categoryListParams.limit"
      :total="categoryCount"
      :on-change="handleGetCategoryList"
    />

    <Edit v-model="editVisible" :category-info="categoryInfo" @submit="handleGetCategoryList" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

import { deleteArticleCategory, setArticleCategoryStatus } from '@/api/article'

import Pagination from '@/components/pagination/index.vue'
import router from '@/router/'
import { ElMessage } from 'element-plus'
import {
  handleGetCategoryList,
  categoryCount,
  isLoadingCategoryList,
  categoryList,
} from './index'

import Edit from './edit.vue'

// 1. get category list
const categoryListParams = ref({
  status: '',
  title: '',
  page: 1,
  limit: 10,
  type: 0,
})

function handleSearch() {
  handleGetCategoryList(categoryListParams.value)
}

handleSearch()

const editVisible = ref(false)

// 4. insert/edit product
function handleInsert() {
  editVisible.value = true
}

const categoryInfo = ref<ArticleCategoryInfoType | null>(null)

function handleEdit(category: ArticleCategoryInfoType) {
  editVisible.value = true
  categoryInfo.value = category
}

// 7. set product status
function handleSetProductStatus(category: ArticleCategoryInfoType) {
  setArticleCategoryStatus(category.id, category.status).catch(() => {
    handleSearch()
    ElMessage.error('Set Failed')
  })
}

// 8. delete category
function handleDeleteProduct(category: ArticleCategoryInfoType) {
  const { is_del: isDel, id } = category
  deleteArticleCategory(id).then(() => {
    handleSearch()
    ElMessage.success({ message: isDel ? 'Restore Success' : 'Delete Success' })
  })
}

// 9. view article
function handleViewArticle(category: ArticleCategoryInfoType) {
  router.push(`/article/list?category=${category.id}`)
}
</script>
